import React, { Component } from 'react'
import { HashRouter, Routes, Route, Navigate ,BrowserRouter} from 'react-router-dom';
import Login from './pages/Login';
import Home from './pages/home/';
// import Function from './pages/Function';
// import Cart from './pages/Cart';
// import TodoList from './pages/TodoList';
// import NotFound from './pages/NotFound';
// import Proflie from './pages/Proflie/Proflie';
import { filterData } from './utils/globa';

import { eventBus } from './utils/eventBus';
// 配置二级路由
const Firstpage =React.lazy(()=>import('./pages/Firstpage'))
const AddShop =React.lazy(()=>import('./pages/shop/AddShop'))
const ShopList =React.lazy(()=>import('./pages/shop/ShopList'))
const AccountList =React.lazy(()=>import('./pages/account/AccountList'))
const AddAcount =React.lazy(()=>import('./pages/account/AddAcount'))
const AddGoods =React.lazy(()=>import('./pages/goods/AddGoods'))
const GoodsList =React.lazy(()=>import('./pages/goods/GoodsList'))
const GoodsStatistics =React.lazy(()=>import('./pages/saleStatistics/GoodsStatistics'))
const OrderStatistics =React.lazy(()=>import('./pages/saleStatistics/OrderStatistics'))
const NotFounds =React.lazy(()=>import('./pages/NotFound'))
const Proflies =React.lazy(()=>import('./pages/Proflie/Proflie'))

  const routes=[
    {path:'Firstpage',element: Firstpage,roles: ["超级管理员"]},
    {path:'AddShop',element: AddShop,roles: ["超级管理员"]},
    {path:'ShopList',element: ShopList},

    {path:'AccountList',element: AccountList},

    {path:'AddAcount',element: AddAcount,roles: ["超级管理员"]},
    {path:'AddGoods',element: AddGoods,roles: ["超级管理员"]},
    {path:'GoodsList',element: GoodsList},
    {path:'GoodsStatistics',element: GoodsStatistics},
    {path:'OrderStatistics',element: OrderStatistics},
    {path:'Proflies',element: Proflies},
    {path:'*',element: NotFounds}


  ]


export default class App extends Component {
  //通知组件强制更新 原因 {this.renderRoutes()}只渲染了一次 ，必须重新通值
  componentDidMount(){
    eventBus.addListener('refreshRoutes',()=>{
      this.forceUpdate();
    })

  }




  renderRoutes=()=>{
    const userInfo=localStorage.userInfo
      let arr=[];
      if(!userInfo){
        arr=routes
      }else{
        arr=filterData(routes,JSON.parse(userInfo).role)
      }

      return arr.map(item=>{
        const { element: Comp } = item;
          return <Route key={item.path} path={item.path} element={<Comp />} />
      })
  }

  render() {  
    return (
      <React.Suspense fallback={<div>加载中...</div>}>
      <BrowserRouter>
      <Routes>
        <Route path='/' element={<Navigate to="/login" />} />
        <Route path="/login" element={<Login />} />
        <Route path="/Home" element={<Home />}>

          {this.renderRoutes()}


        {/* <Route path="Firstpage" element={<Firstpage />} />
        <Route path="AddShop" element={<AddShop />} />
        <Route path="ShopList" element={<ShopList />} />
        <Route path="AccountList" element={<AccountList />} />
        <Route path="AddAcount" element={<AddAcount />} />
        <Route path="AddGoods" element={<AddGoods />} />
        <Route path="GoodsList" element={<GoodsList />} />
        <Route path="GoodsStatistics" element={<GoodsStatistics />} />
        <Route path="OrderStatistics" element={<OrderStatistics />} />
        <Route path="Proflies" element={<Proflies />} />
        <Route path="*" element={<NotFounds />} /> */}
        </Route>
         
      </Routes>
    </BrowserRouter>
    </React.Suspense>
    )
  }
}
